<script setup lang="ts">

import {useHeaderUserInfomation} from "../hooks/useHeaderUserInfomation.ts";
import {
  Coordinate,
  DArrowRight,
  DocumentRemove, GoldMedal,
  Guide,
  PictureRounded,
  Tickets, UploadFilled,
  UserFilled
} from "@element-plus/icons-vue";
import {useRouter} from "vue-router";

const router = useRouter()
const {userName, vermicelli, caseSum, like, iconUrl, getWholeNum} = useHeaderUserInfomation()

defineExpose({
  userName,changeUserName
})

function changeUserName(newName:any){
  userName.value = newName;
}


const emit = defineEmits(['removeLogin'])
const exit = () => {
  emit('removeLogin')
}
</script>

<template>
  <div class="user-header-box">
    <div class="header-name">
      <div class="header-name-box">
        {{ userName }}
      </div>
      <div class="vip-icon-box">
        <el-image class="vip-icon-size" :src="iconUrl"/>
      </div>
    </div>
    <div class="header-line"></div>

    <div class="header-case">
      <div class="header-sum-box">
        <el-text size="large">{{ vermicelli == 0 ? '--' : getWholeNum(vermicelli) }}</el-text>
        <div>
          <el-text>粉丝</el-text>
        </div>
      </div>
      <div class="header-sum-box">
        <el-text size="large">{{ caseSum == 0 ? '--' : getWholeNum(caseSum) }}</el-text>
        <div>
          <el-text>关注</el-text>
        </div>
      </div>
      <div class="header-sum-box">
        <el-text size="large">{{ like == 0 ? '--' : getWholeNum(like) }}</el-text>
        <div>
          <el-text>获赞</el-text>
        </div>
      </div>
    </div>
    <div class="header-line"></div>

    <div class="header-btn-list">
      <div class="header-btn-list-item-height header-btn-margin">
        <el-button class="header-bottom-btn" link @click="router.push('/personalCenter-Self')">
          <div class="header-btn-content">
            <div class="header-btn-icon">
              <el-icon>
                <UserFilled/>
              </el-icon>
            </div>
            <div class="header-btn-text">
              个人中心
            </div>
          </div>
        </el-button>
      </div>
      <div class="header-btn-list-item-height">
        <el-button class="header-bottom-btn" link>
          <div class="header-btn-content">
            <div class="header-btn-icon">
              <el-icon>
                <DocumentRemove/>
              </el-icon>
            </div>
            <div class="header-btn-text">
              内容管理
            </div>
          </div>
        </el-button>
      </div>
      <div class="header-btn-list-item-height">
        <el-button class="header-bottom-btn" link>
          <div class="header-btn-content">
            <div class="header-btn-icon">
              <el-icon>
                <Tickets/>
              </el-icon>
            </div>
            <div class="header-btn-text">
              我的学习
            </div>
          </div>
        </el-button>
      </div>
      <div class="header-btn-list-item-height">
        <el-button class="header-bottom-btn" link>
          <div class="header-btn-content">
            <div class="header-btn-icon">
              <el-icon>
                <Guide/>
              </el-icon>
            </div>
            <div class="header-btn-text">
              我的订单
            </div>
          </div>
        </el-button>
      </div>
      <div class="header-btn-list-item-height">
        <el-button class="header-bottom-btn" link>
          <div class="header-btn-content">
            <div class="header-btn-icon">
              <el-icon>
                <PictureRounded/>
              </el-icon>
            </div>
            <div class="header-btn-text">
              我的钱包
            </div>
          </div>
        </el-button>
      </div>
      <div class="header-btn-list-item-height">
        <el-button class="header-bottom-btn" link>
          <div class="header-btn-content">
            <div class="header-btn-icon">
              <el-icon>
                <UploadFilled/>
              </el-icon>
            </div>
            <div class="header-btn-text">
              我的云服务
            </div>
          </div>
        </el-button>
      </div>
      <div class="header-btn-list-item-height">
        <el-button class="header-bottom-btn" link @click="router.push('/grade')">
          <div class="header-btn-content">
            <div class="header-btn-icon">
              <el-icon>
                <GoldMedal/>
              </el-icon>
            </div>
            <div class="header-btn-text">
              我的等级
            </div>
          </div>
        </el-button>
      </div>

    </div>

    <div class="header-line"></div>
    <div class="header-bottom">
      <el-button class="header-bottom-btn" link>
        <div class="header-btn-content">
          <div class="header-btn-icon">
            <el-icon>
              <Coordinate/>
            </el-icon>
          </div>
          <div class="header-btn-text">
            签到抽奖
          </div>
        </div>
      </el-button>
    </div>
    <div class="header-line"></div>
    <div class="header-bottom">
      <el-button class="header-bottom-btn" link @click="exit">
        <div class="header-btn-content">
          <div class="header-btn-icon">
            <el-icon>
              <DArrowRight/>
            </el-icon>
          </div>
          <div class="header-btn-text">
            退出
          </div>
        </div>
      </el-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import "style/UserHeaderInfomation";
</style>